<template>
	<view class="dmxwrtxert vertical-bottom">
		<view class="jmkxfdfver">
			<view class="display-flex pd pt20 pm20">
				<view class="z9 fz26 vertical-center" @tap="emit('close')">
					取消
				</view>
				<view class="cen fz32 flex-1">
					选择起止日期
				</view>
				<view class="lser fz26 vertical-center" @tap="sunnxertw">
					确认
				</view>
			</view>
			<view class="btm display-flex kkmxetxwertw">
				<view class="flex-1 ">
					<picker-view class="picker-view  h100" v-if="visible" @change="jmxfgfeera"
						:indicator-style="indicatorStyle" :value="zozjada">
						<picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>

						<picker-view-column>
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>

						<picker-view-column>
							<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class=" vertical-center pl20 pr20">
					至
				</view>

				<view class="flex-1 ">
					<picker-view class="picker-view  h100" v-if="visible" @change="jmxfgfeerb"
						:indicator-style="indicatorStyle" :value="zozjadb">
						<picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>

						<picker-view-column>
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>

						<picker-view-column>
							<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, nextTick } from "vue"
	const emit = defineEmits([
		'close',
		'success'
	]);
	
	const years = ref([])
	const date = new Date()
	const months = ref([])
	const month = date.getMonth() + 1
	const days = ref([])
	const day = date.getDate()
	const visible = ref(false)
	const visibleb = ref(false)
	const zozjada = ref([9999, month - 1, day - 1])
	const zozjadb = ref([9999, month - 1, day - 1])
	const daqw = date.getFullYear() + '-' + month + '-' + day
	const qizhisa = ref(daqw)
	const qizhisb = ref(daqw)

	const indicatorStyle = `height: 50px;`
	for (let i = 1990; i <= date.getFullYear(); i++) {
		years.value.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.value.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.value.push(i)
	}
	const jmxfgfeera = ({ detail }) => {
		const val = detail.value
		qizhisa.value = years.value[val[0]] + '-' + months.value[val[1]] + '-' + days.value[val[2]]
	}
	const jmxfgfeerb = ({ detail }) => {
		const val = detail.value
		qizhisb.value = years.value[val[0]] + '-' + months.value[val[1]] + '-' + days.value[val[2]]
	}
	nextTick(() => {
		visible.value = true
		visibleb.value = true
	})
	const sunnxertw = ()=>{
		emit('success',{
			startTime:qizhisa.value,
			endTime:qizhisb.value
		})
	}
</script>

<style scoped>
	.dmxwrtxert {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.jmkxfdfver {
		min-height: 200rpx;
		background: #fff;
		width: 100%;
	}

	.kkmxetxwertw {
		height: 500rpx;
	}
</style>